<template>
    <div>
      <h2>常见正则表达式示例</h2>
      <div class="regex-container">      
        <!-- 验证中文的正则表达式示例 -->
        <div class="regex-item">
          <h3>
              验证中文
              <button @click="toggleChineseVisibility" class="collapse-btn">{{ isChineseVisible? '收起' : '展开' }}</button>
          </h3>
          <p v-show="isChineseVisible">正则表达式：<code><span ref="chineseRegexCode">/[\u4e00-\u9fa5]+/</span></code></p>
          <p v-show="isChineseVisible">说明：此正则表达式用于匹配包含一个或多个中文字符的字符串。<code>\u4e00-\u9fa5</code>代表中文字符的Unicode编码范围，<code>+</code>表示前面的字符（这里就是中文字符范围）出现一次或多次。</p>
          <button v-show="isChineseVisible" @click="copyChineseRegex">复制表达式</button>
        </div>
        <!-- 验证邮箱的正则表达式示例 -->
        <div class="regex-item">
          <h3>
              验证邮箱
              <button @click="toggleEmailVisibility" class="collapse-btn">{{ isEmailVisible? '收起' : '展开' }}</button>
          </h3>
          <p v-show="isEmailVisible">正则表达式：<code><span ref="emailRegexCode">/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/</span></code></p>
          <p v-show="isEmailVisible">
            说明：整体上用于匹配符合常见格式的邮箱地址。开头的 <code>^</code> 表示匹配字符串的开始位置，<code>[a-zA-Z0-9._%+-]+</code> 表示可以出现一次或多次的字母、数字、特定符号（如 <code>.</code>、<code>_</code> 等）组成的字符串，接着 <code>@</code> 为邮箱的必备符号，后面的 <code>[a-zA-Z0-9.-]+</code> 表示域名部分的相关字符组合，最后的 <code>\.[a-zA-Z]{2,}</code> 表示域名后缀至少由两个字母组成，最后的 <code>$</code> 表示匹配字符串的结束位置。
          </p>
          <button v-show="isEmailVisible" @click="copyEmailRegex">复制表达式</button>
        </div>
        <!-- 验证手机号（简单示例，可能不完全适配所有情况）的正则表达式示例 -->
        <div class="regex-item">
          <h3>
              验证手机号（中国大陆）
              <button @click="togglePhoneVisibility" class="collapse-btn">{{ isPhoneVisible? '收起' : '展开' }}</button>
          </h3>
          <p v-show="isPhoneVisible">正则表达式：<code><span ref="phoneRegexCode">/^1[3-9]\d{9}$/</span></code></p>
          <p v-show="isPhoneVisible">
            说明：以 <code>1</code> 开头，因为中国大陆手机号开头一般是 <code>1</code>，然后 <code>[3-9]</code> 表示第二位数字可以是 <code>3</code> 到 <code>9</code> 中的一个，后面跟着 <code>\d{9}</code> 表示后面有 <code>9</code> 位数字，整体用于匹配常见的11位手机号码格式，<code>^</code> 和 <code>$</code> 限定了匹配的是整个字符串。
          </p>
          <button v-show="isPhoneVisible" @click="copyPhoneRegex">复制表达式</button>
        </div>
      </div>
    </div>
  
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  // 用于访问中文正则表达式代码所在的DOM元素引用
  const chineseRegexCode = ref(null);
  // 用于访问邮箱正则表达式代码所在的DOM元素引用
  const emailRegexCode = ref(null);
  // 用于访问手机号正则表达式代码所在的DOM元素引用
  const phoneRegexCode = ref(null);

  // 控制中文正则表达式模块显示隐藏的响应式数据
  const isChineseVisible = ref(false);
  
  // 控制邮箱正则表达式模块显示隐藏的响应式数据
  const isEmailVisible = ref(false);
  
  // 控制手机号正则表达式模块显示隐藏的响应式数据
  const isPhoneVisible = ref(false);
  
  const copyTextToClipboard = (text) => {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
  };
  
  const copyChineseRegex = () => {
    if (chineseRegexCode.value) {
      copyTextToClipboard(chineseRegexCode.value.textContent);
    }
  };
  
  const copyEmailRegex = () => {
    if (emailRegexCode.value) {
      copyTextToClipboard(emailRegexCode.value.textContent);
    }
  };
  
  const copyPhoneRegex = () => {
    if (phoneRegexCode.value) {
      copyTextToClipboard(phoneRegexCode.value.textContent);
    }
  };

  const toggleChineseVisibility = () => {
    isChineseVisible.value =!isChineseVisible.value;
  };

  const toggleEmailVisibility = () => {
    isEmailVisible.value =!isEmailVisible.value;
  };

  const togglePhoneVisibility = () => {
    isPhoneVisible.value =!isPhoneVisible.value;
  };
  
  onMounted(() => {
    // 在这里可以进行一些初始化相关的操作，如果有的话，目前暂时不需要额外操作
  });
  </script>
  
  <style scoped lang="scss">
    @use "../assets/common.scss";

  .regex-container {
    padding: 20px;
  }

  .regex-item {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 15px;
  }

  h3 {
    margin-top: 0;
  }

  code {
    background-color: #f4f4f4;
    padding: 2px 5px;
    border-radius: 3px;
  }

  button {
    margin-top: 5px;
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }

  button:hover {
    background-color: #0056b3;
  }

  .collapse-btn {
    margin-left: 10px;
    padding: 3px 8px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
 
  </style>